import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import DrillScope from './JSDrillScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
var traceCols = [{
  title:'名称',
  key:'jsUrl',
  render:function(fmtVal,rowData){
    return (
      <a href={'#/jserror/traces/'+rowData.id}>{fmtVal}</a>
    )
  }
},{
  title:'错误信息',
  key:'errMsg',
  sortable:true
},{
  title:'首次发生时间',
  width:100,
  key:'firstTime',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'最后发生时间',
  width:100,
  key:'lastTime',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'发生次数',
  sortable:true,
  key:'errCount'
},{
  title:'影响设备数',
  sortable:true,
  key:'deviceNum'
}]

export default class DrillView extends View {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/jserror/">&#xe638;</a>
            <h4>{this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title="Top 5 Javascript错误" extra={
                      addWidgetMixin(this.scope.chart0Api,'Top 5 Javascript错误')
                    }>
                    <ChartWidget store={this.state.chart0}/>
                  </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title="TOP5 JS错误类型">
                    <ChartWidget store={this.state.chart1} chartType="column" chartSettings={{
                        xAxis:{
                          type:'category',
                          minTickInterval:1,
                          categories:this.state.chart1.series?this.state.chart1.series[0].data.map((s) => s.name):[]
                        },
                        legend:{
                          enabled:false
                        }
                      }} />
                  </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title="JS错误列表">
                    <GridWidget cols={traceCols} store={this.state.grid} />
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

DrillView.defaultProps = {
  Scope:DrillScope
}
